<template>
  <div class="ExtensionManagement">
    <h4>推广管理</h4>
    <el-row class="cus-header-content" :gutter="10">
      <el-col :span="3">
        <div class="cus-header-item" @click="goStaticExtensionDetail">
          <div class="cus-header-item-title">累计订单(/个)</div>
          <div class="cus-header-item-count">{{ Infos.orderCount != undefined ? Infos.orderCount : 0 }}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="cus-header-item" @click="goStaticExtensionDetail">
          <div class="cus-header-item-title">累计销售额</div>
          <div class="cus-header-item-count">￥{{ Infos.orderPriceCount.toFixed(2) }}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="cus-header-item" @click="goStaticExtensionDetail">
          <div class="cus-header-item-title">累计客户(/个)</div>
          <div class="cus-header-item-count">{{ Infos.customerCount != undefined ? Infos.customerCount : 0 }}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="cus-header-item" @click="goStaticExtensionDetail">
          <div class="cus-header-item-title">推广客户(/个)</div>
          <div class="cus-header-item-count">{{ Infos.promoterCount != undefined ? Infos.promoterCount : 0 }}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="cus-header-item" @click="goStaticExtensionDetail">
          <div class="cus-header-item-title">访问用户(/个)</div>
          <div class="cus-header-item-count">{{ Infos.visitorCount != undefined ? Infos.visitorCount : 0 }}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="cus-header-item" @click="goStaticExtensionDetail">
          <div class="cus-header-item-title">累计佣金</div>
          <div class="cus-header-item-count">￥{{ Infos.commissionCount.toFixed(2) }}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="cus-header-item" @click="goStaticExtensionDetail">
          <div class="cus-header-item-title">已结算</div>
          <div class="cus-header-item-count">￥{{ Infos.isSettlementPrice.toFixed(2) }}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="cus-header-item" @click="goStaticExtensionDetail">
          <div class="cus-header-item-title">待结算</div>
          <div class="cus-header-item-count">￥{{ Infos.unSettlementPrice.toFixed(2) }}</div>
        </div>
      </el-col>
    </el-row>
    <div class="cus-tabs-style">
      <div class="key-search clearfix">
        <div class="floatfix">
          <el-input
            v-model.trim="keySearch"
            suffix-icon="el-icon-search"
            :placeholder="activeModel == '1'?'输入手机号、姓名搜索':'输入关键字搜索'"
            @keyup.native="replaceSpace"
          />
          <el-button type="primary" @click="Initialization">确认</el-button>
          <el-button
            v-if="activeModel == '1'"
            type="primary"
            @click="
              $router.push({
                name: 'AddExtensionPre',
                query: {
                  p:$ed({
                    state:'add'
                  })
                }
              })
            "
          >添加推广员</el-button>
          <el-button
            v-if="activeModel == '2'"
            type="primary"
            @click="
              $router.push({
                name: 'AddPlan',
                query: {
                  p:$ed({
                    state:'add'
                  })
                }
              })
            "
          >添加方案</el-button>
          <el-button
            v-if="activeModel == '3'"
            type="primary"
            @click="addExtensionGoods"
          >添加推广商品</el-button>
        </div>
      </div>
      <el-tabs v-model="activeModel" @tab-click="handleTabClidk">
        <el-tab-pane label="推广员" name="1">
          <el-table
            v-loading="loading"
            :data="BindataTuiGuangYuan"
            class="cus-table"
            :header-cell-style="handleCellStyle"
          >
            <el-table-column label="推广员" prop="nickname" :min-width="160">
              <template slot-scope="scope">
                <div class="cus-column-commodity">
                  <div class="left">
                    <el-image :src="require('@/assets/images/avator.png')" />
                  </div>
                  <div class="right">
                    <span>{{ scope.row.nickname }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="手机号码" prop="mobile" align="center" :width="110" />
            <el-table-column
              label="推广方案"
              prop="customTemplate"
              align="center"
              :min-width="160"
            />
            <el-table-column
              label="推广用户量"
              prop="userCount"
              align="center"
            />
            <el-table-column label="推广销售额" prop="salePrice" align="center">
              <template slot-scope="scope">
                ￥{{ scope.row.salePrice || 0 }}
              </template>
            </el-table-column>
            <el-table-column label="推广佣金" prop="proxyPrice" align="center">
              <template slot-scope="scope">
                ￥{{ scope.row.proxyPrice || 0 }}
              </template>
            </el-table-column>
            <el-table-column label="添加时间" align="center" prop="addTime" :width="155" />
            <el-table-column label="操作" align="center" :width="240">
              <template slot-scope="scope">
                <div class="operation">
                  <el-button type="text" @click="extensionLink(scope.row)">推广链接</el-button>
                  <span style="margin: 0px 10px">|</span>
                  <el-button
                    type="text"
                    @click="handelDetail(scope.row)"
                  >详情</el-button>
                  <span style="margin: 0px 10px">|</span>
                  <el-button
                    type="text"
                    @click="handelEdit(scope.row)"
                  >编辑</el-button>
                  <span style="margin: 0px 10px">|</span>
                  <el-button
                    type="text"
                    style="color: red"
                    @click="handelRemove(scope.row.id)"
                  >删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="推广方案" name="2">
          <el-table
            ref="fa"
            v-loading="loading"
            :data="BindataFangAn"
            class="cus-table"
            :header-cell-style="handleCellStyle"
            @selection-change="handleSelectionChange"
          >
            >
            <el-table-column type="selection" />
            <el-table-column label="推广方案名称" prop="name" />
            <el-table-column label="推广员" prop="userCount" align="center" />
            <el-table-column
              label="推广商品"
              prop="goodsCount"
              align="center"
            />
            <el-table-column label="操作" prop="test" align="right">
              <template slot-scope="scope">
                <div class="operation">
                  <el-button
                    type="text"
                    @click="
                      $router.push({
                        name: 'ShowPlan',
                        query: {
                          p:$ed({
                            row: scope.row, state: 'detail'
                          })
                        }
                      })
                    "
                  >详情</el-button>
                  <span style="margin: 0px 10px">|</span>
                  <el-button
                    type="text"
                    @click="handelEdit(scope.row)"
                  >编辑</el-button>
                  <span style="margin: 0px 10px">|</span>
                  <el-button
                    type="text"
                    style="color: red"
                    @click="handelRemove(scope.row.id)"
                  >删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="推广商品" name="3">
          <el-table
            ref="goods"
            v-loading="loading"
            :data="BindataTGangPin"
            class="cus-table"
            :header-cell-style="handleCellStyle"
            @selection-change="selectionChange"
          >
            <el-table-column type="selection" />
            <el-table-column label="商品" prop="name" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div class="cus-column-commodity">
                  <div class="left">
                    <TableColumnGoodsImage :src="scope.row.picUrl" />
                  </div>
                  <div class="right">
                    <span style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;">{{ scope.row.name }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="类型" prop="goodsType">
              <template slot-scope="scope">
                <span v-if="scope.row.goodsType == 'lease'">租赁</span>
                <span v-if="scope.row.goodsType == 'sale'">售卖</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="isOnSale">
              <template slot-scope="scope">
                <span v-if="scope.row.isOnSale == '0'">未销售</span>
                <span v-if="scope.row.isOnSale == '1'">销售中</span>
              </template>
            </el-table-column>
            <el-table-column
              label="推广分成"
              prop="customDivide"
              align="center"
            >
              <template slot-scope="scope">
                <!--                <span v-if="scope.row.customDivide.indexOf('%') != -1">{{ scope.row.customDivide }}</span>
                <span v-else>￥{{ scope.row.customDivide }}</span>-->
                <span>{{ scope.row.customDivide }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="推广访问量"
              prop="visitCount"
              align="center"
            >
              <template slot-scope="scope">
                <p>访问人数：{{ scope.row.personCount }}</p>
                <p>访问次数：{{ scope.row.visitCount }}</p>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="right">
              <template slot-scope="scope">
                <div class="operation">
                  <el-button
                    type="text"
                    @click="handelEdit(scope.row)"
                  >编辑</el-button>
                  <span style="margin: 0px 10px">|</span>
                  <el-button
                    type="text"
                    style="color: red"
                    @click="handelCancel([scope.row.id])"
                  >取消推广</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div class="footer">
        <div v-if="activeModel == '3'" class="footer-left">
          <el-button
            plain
            size="small"
            type="primary"
            @click="allList"
          >全选</el-button>
          <el-button
            plain
            size="small"
            type="primary"
            @click="allfcbl"
          >修改分成</el-button>
          <el-button
            plain
            size="small"
            type="danger"
            @click="allHandelCancel"
          >取消推广</el-button>
        </div>
        <div v-else />
        <el-pagination
          v-if="activeModel != '1'"
          class="pagination-right"
          :current-page="pages.pageIndex"
          :page-sizes="[20, 30, 40, 50]"
          :page-size="pages.pageSize"
          :total="pages.total"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </div>
    <!-- 商品分成设置 -->
    <el-dialog :visible.sync="visibleSetfz" title="设置分成" width="1200px" :modal="false">
      <el-table :data="fzData" border height="400">
        <el-table-column label="商品" prop="goodsName" align="center">
          <template slot-scope="scope">
            <div class="goodsName">
              <TableColumnGoodsImage :src="scope.row.picUrl" :img-size="'60px'" />
              <span style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="类型" prop="type" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.goodsType == 'sale'">售卖</span>
            <span v-else>租赁</span>
          </template>
        </el-table-column>
        <el-table-column label="分成比例" align="center" width="720">
          <template slot-scope="scope">
            <!--            <ExtensionProportionValue ref="extensionProportion" :commodity-id="scope.row.id"/>-->
            <div class="visibleSetfz">
              <el-radio-group v-model="scope.row.types">
                <el-radio
                  label="0"
                >推广分成比例:<el-input
                  v-model.trim="scope.row.proportion"
                  :disabled="scope.row.types !== '0'"
                  @keyup.native="changePercent(scope.$index)"
                />%</el-radio>
                <el-radio
                  label="1"
                >推广固定分成:<el-input
                  v-model="scope.row.fixed"
                  :disabled="scope.row.types !== '1'"
                  @keyup.native="changeFixed(scope.$index)"
                />元</el-radio>
              </el-radio-group>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="danger"
              plain
              @click="goodsRemove(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" style="text-align: center">
        <el-button type="info" @click="rebackPage">返回</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </div>
    </el-dialog>
    <!-- 商品对话框 -->
    <el-dialog
      :modal="false"
      :visible.sync="goodsVisible"
      width="900px"
    >
      <add-extension-goods
        ref="AddExtensionGoods"
        @handelAddRows="handelAddRows"
        @handelClose="handelClose"
        @handelAllSelect="handelAllSelect"
      />
    </el-dialog>
    <!-- 编辑商品分成 -->
    <el-dialog :visible.sync="goodsfcbl" title="修改分成比例" :modal="false">
      <div>
        <el-form ref="goodsForm" :model="goodsForm" :rules="rules" label-width="120px" label-position="left">
          <el-form-item label="选中商品:">
            <el-card style="width: 400px">
              <el-col :span="8">
                <TableColumnGoodsImage :src="selectGoods.picUrl" :img-size="'100px'" />
              </el-col>
              <el-col :span="12">
                <p>{{ selectGoods.name }}</p>
              </el-col>
            </el-card>
          </el-form-item>
          <el-form-item label="推广分成:" prop="type">
            <el-col :span="10">
              <el-radio-group v-model="goodsForm.type" @change="changeType">
                <el-radio
                  label="0"
                >推广分成比例:</el-radio>
                <el-radio
                  label="1"
                >推广固定分成
                </el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>
          <el-form-item v-if="goodsForm.type == '0'" label="分成比例:" prop="percent">
            <el-input
              v-model.trim="goodsForm.percent"
              placeholder="请输入推广分成比例"
              @keyup.native="changeGoodsFormPercent"
            />
          </el-form-item>
          <el-form-item v-if="goodsForm.type == '1'" label="分成金额:" prop="fix">
            <el-input
              v-model.trim="goodsForm.fix"
              placeholder="请输入推广固定分成"
              @keyup.native="changeGoodsFormFix"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitFCBIL"> 提交 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 批量修改分成 -->
    <el-dialog :visible.sync="fcbl" title="批量修改分成" :modal="false">
      <div>
        <el-form ref="forms" :model="formData" :rules="pattern">
          <el-form-item label="选中商品:">
            <span>
              {{ selection.length }}
            </span>
          </el-form-item>
          <el-form-item label="推广分成:" prop="type">
            <el-col :span="10">
              <el-radio-group v-model="formData.type" @change="changeFormData">
                <el-radio
                  label="0"
                >推广分成比例:</el-radio>
                <el-radio
                  label="1"
                >推广固定分成
                </el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>
          <el-form-item v-if="formData.type == '0'" label="分成比例:" prop="percent">
            <el-col :span="24">
              <el-input
                v-model.trim="formData.percent"
                placeholder="请输入推广分成比例"
                @keyup.native="changeFormDataPercent"
              />
            </el-col>
          </el-form-item>
          <el-form-item v-if="formData.type == '1'" label="分成金额:" prop="fix">
            <el-col :span="24">
              <el-input
                v-model.trim="formData.fix"
                placeholder="请输入推广固定分成"
                @keyup.native="changeFormDataFix"
              />
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitFC"> 提交 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 推广员链接   -->
    <extension-link v-if="resetQrcode" ref="extensionLinkUrl" :link-visible="linkVisible" @handelClose="handelLinkUrlClose" />
    <!--    <el-dialog :visible.sync="linkVisible" title="推广员链接" :modal="false" class="extension-link">
      <div class="head" style="width:100%;display: flex;justify-content: start">
        <div class="left" style="width: 60px;height: 60px"> <el-image :src="require('@/assets/images/avator.png')" /></div>
        <div class="right" style="line-height: 60px"> {{ extensioner.name }} </div>
      </div>
      <div class="content" style="display: flex; justify-content: space-between">
        <div class="left-tab">
          <el-radio-group v-model="linkType">
            <el-col :span="24" class="link-tab">
              <el-radio-button label="wechat">微信</el-radio-button>
            </el-col>
            <el-col :span="24" class="link-tab">
              <el-radio-button label="alipay">支付宝</el-radio-button>
            </el-col>
          </el-radio-group>
        </div>
        <div class="right-code-content">
          <div v-if="linkType == 'wechat'">
            <div class="little-title">
              <p>小程序</p>
            </div>
            <div class="right-link-content">
              <div class="left-code">
                <el-card>
                  <el-row type="flex" justify="center">
                    <QrCodeModel ref="qrcodeModel"></QrCodeModel>
                  </el-row>
                  <el-row type="flex" justify="center">
                    <el-button type="primary" @click="downLoad">下载小程序码</el-button>
                  </el-row>
                </el-card>
              </div>
              <div class="right-linkAddress">
                <el-col :span="24"><el-input v-model="extensioner.wechatLinkAddress" /></el-col>
                <el-col :span="24" type="flex" justify="end"> <el-button type="primary" @click="copyLink">复制链接</el-button></el-col>
              </div>
            </div>

          </div>

        </div>
      </div>
    </el-dialog>-->
  </div>
</template>

<script>
/** 推广管理 */
import {
  ExtensionManagementInfo,
  schemeList,
  schemeDel,
  ExtensionManagementList,
  extensionManagementDel,
  extensionList,
  extensionCancel,
  updateProportion,
  promotionUpdate,
  commodityDetail
} from '@/api/customAPI/shop/ExtensionManagement'
import AddExtensionGoods from '@/components/AddExtensionGoods/index'
import TableColumnGoodsImage from '@/components/TableColumnGoodsImage'
import ExtensionLink from '@/components/ExtensionLink'
export default {
  name: 'ExtensionManagement',
  components: {
    AddExtensionGoods,
    TableColumnGoodsImage,
    ExtensionLink
  },
  data() {
    return {
      loading: true,
      goodsVisible: false,
      visibleSetfz: false,
      goodsfcbl: false,
      fcbl: false,
      resetQrcode: true,
      goodsForm: {
        type: '',
        fix: '',
        percent: ''
      },
      selectGoods: {
        id: '',
        picUrl: '',
        name: ''
      },
      rules: {
        type: [{ required: true, message: '请选择推广类型', trigger: 'blur' }]
      },
      formData: {
        type: '',
        percent: '',
        fix: '',
        promotion: ''
      },
      activeModel: '1',
      Bindata: [],
      fzData: [],
      Infos: {
        orderCount: 0,
        orderPriceCount: 0,
        customerCount: 0,
        commissionCount: 0,
        isSettlementPrice: 0,
        unSettlementPrice: 0,
        promoterCount: 0,
        visitorCount: 0
      },
      linkVisible: false,
      pattern: {
        type: [{ required: true, message: '请选择推广类型', trigger: 'blur' }]
      },
      // 推广方案列表
      keySearch: '',
      BindataFangAn: [], // 推广方案
      BindataTuiGuangYuan: [], // 推广员
      BindataTGangPin: [], // 推广商品
      selection: [],
      pages: {
        pageIndex: 1,
        pageSize: 0,
        total: 0
      }
    }
  },
  computed: {},
  watch: {
    visibleSetfz: {
      handler(newValue, oldValue) {
        if (newValue === false) {
          this.fzData = []
        }
      }
    }
  },
  mounted() {
    this.ExtensionInfo()
    this.Initialization()
  },
  activated() {
    this.ExtensionInfo()
    this.Initialization()
  },
  methods: {
    handelChange(v) {
      console.log(v)
      // if (v.types === '0') {
      //   v.fixed =
      // } else {
      //   v.proportion =
      // }
    },
    changeType() {
      if (this.goodsForm.type == '0') {
        this.goodsForm.fix = null
      } else {
        this.goodsForm.percent = null
      }
    },
    changeGoodsFormPercent() {
      if (/^[0-9]*[1-9][0-9]*$/g.test(this.goodsForm.percent)) {
        if (this.goodsForm.percent < 0) {
          this.goodsForm.percent = 0
        } if (this.goodsForm.percent > 100) {
          this.goodsForm.percent = 100
        }
      } else {
        this.goodsForm.percent = null
      }
    },
    changeGoodsFormFix() {
      this.goodsForm.fix = this.goodsForm.fix.replace(/[^0-9.]/g, '')
    },
    /** 编辑商品修改分成比例 */
    submitFCBIL() {
      this.$refs.goodsForm.validate(v => {
        if (v) {
          if (this.goodsForm.type == '0' && !this.goodsForm.percent) {
            this.$message.warning('推广分成比例不能为空')
          } else if (this.goodsForm.type == '1' && !this.goodsForm.fix) {
            this.$message.warning('推广固定金额不能为空')
          } else if (this.goodsForm.type == '1' && !/^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.goodsForm.fix)) {
            this.$message.warning('推广固定金额格式不正确')
          } else if (this.goodsForm.type == '1' && /^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.goodsForm.fix) && this.goodsForm.fix > 100000) {
            this.$message.warning('推广固定金额不能大于100000')
          } else if (this.goodsForm.type == '1' && /^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.goodsForm.fix) && this.goodsForm.fix <= 0) {
            this.$message.warning('推广固定金额必须大于0')
          } else {
            promotionUpdate({
              goodsId: this.selectGoods.id.toString(),
              promotion: this.goodsForm.type == '0' ? this.goodsForm.percent : this.goodsForm.fix,
              type: parseInt(this.goodsForm.type)
            }).then(inf => {
              this.$message.success('成功')
              this.goodsfcbl = false
              this.selectGoods.id = null
              this.selectGoods.picUrl = null
              this.selectGoods.name = null
              this.$refs.goodsForm.resetFields()
              this.Initialization()
            })
          }
        }
      })
    },
    changeFormData() {
      if (this.formData.type == '0') {
        this.formData.fix = null
      } else {
        this.formData.percent = null
      }
    },
    changeFormDataPercent() {
      if (/^[0-9]*[1-9][0-9]*$/g.test(this.formData.percent)) {
        if (this.formData.percent < 0) {
          this.formData.percent = 0
        } if (this.formData.percent > 100) {
          this.formData.percent = 100
        }
      } else {
        this.formData.percent = null
      }
    },
    changeFormDataFix() {
      this.formData.fix = this.formData.fix.replace(/[^0-9.]/g, '')
    },
    submitFC() {
      this.$refs.forms.validate(v => {
        if (v) {
          if (this.formData.type == '1' && !this.formData.fix) {
            this.$message.warning('推广固定金额不能为空')
          } else if (this.formData.type == '0' && !this.formData.percent) {
            this.$message.warning('推广分成比例不能为空')
          } else if (this.formData.type == '1' && !/^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.formData.fix)) {
            this.$message.warning('推广固定金额格式不正确')
          } else if (this.formData.type == '1' && /^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.formData.fix) && this.formData.fix > 100000) {
            this.$message.warning('推广固定金额不能大于100000')
          } else if (this.formData.type == '1' && /^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(this.formData.fix) && this.formData.fix <= 0) {
            this.$message.warning('推广固定金额必须大于0')
          } else {
            promotionUpdate({
              goodsId: this.selection.toString(),
              promotion: this.formData.type == '0' ? this.formData.percent : this.formData.fix,
              type: parseInt(this.formData.type)
            }).then(inf => {
              this.$message.success('成功')
              /* this.goodsfcbl = false
              this.selectGoods.id=null
              this.selectGoods.picUrl=null
              this.selectGoods.name=null*/
              this.$refs.forms.resetFields()
              this.fcbl = false
              this.Initialization()
            })
          }
        }
      })
    },
    allfcbl() {
      if (this.selection.length > 0) {
        this.fcbl = true
      } else {
        this.$message.warning('请先选择数据')
      }
    },
    addExtensionGoods() {
      this.goodsVisible = true
      this.$nextTick(() => {
        this.$refs.AddExtensionGoods.Refresh()
      })
    },
    rebackPage() {
      if (this.fzData.length > 0) {
        this.$refs.AddExtensionGoods.setSelectedList(this.fzData)
      }
      this.visibleSetfz = false
      this.goodsVisible = true
    },
    changePercent(index) {
      if (/^[0-9]*[1-9][0-9]*$/g.test(this.fzData[index].proportion)) {
        if (this.fzData[index].proportion < 0) {
          this.fzData[index].proportion = 0
        } if (this.fzData[index].proportion > 100) {
          this.fzData[index].proportion = 100
        }
      } else {
        this.fzData[index].proportion = null
      }
    },
    changeFixed(index) {
      this.fzData[index].fixed = this.fzData[index].fixed.replace(/[^0-9.]/g, '')
    },
    replaceSpace() {
      this.keySearch = this.keySearch.replace(/\s*/g, '')
    },
    submit() {
      if (this.fzData.length > 0) {
        const params = []
        try {
          this.fzData.forEach((item, index) => {
            if (!item.types) {
              this.$message.warning('第' + (index + 1) + '行商品未设置推广类型')
              throw new Error('第' + (index + 1) + '行商品未设置推广类型')
            } else {
              if (item.types === '0' && !item.proportion) {
                this.$message.warning('第' + (index + 1) + '行商品未填写推广比例')
                throw new Error('第' + (index + 1) + '行商品未填写推广比例')
              } else if (item.types === '1' && !item.fixed) {
                this.$message.warning('第' + (index + 1) + '行商品未填写推广固定金额')
                throw new Error('第' + (index + 1) + '行商品未填写推广固定金额')
              } else if (item.types === '1' && !/^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(item.fixed)) {
                this.$message.warning('第' + (index + 1) + '行推广固定金额格式不正确')
                throw new Error('第' + (index + 1) + '行推广固定金额格式不正确')
              } else if (item.types === '1' && /^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(item.fixed) && item.fixed > 100000) {
                this.$message.warning('第' + (index + 1) + '行推广固定金额不能大于100000')
                throw new Error('第' + (index + 1) + '行推广固定金额不能大于100000')
              } else if (item.types === '1' && /^((\d|[1-9]\d+)|\.\d{1,2}|(\d|[1-9]\d+)\.\d{1,2})$/g.test(item.fixed) && item.fixed <= 0) {
                this.$message.warning('第' + (index + 1) + '行推广固定金额必须大于0')
                throw new Error('第' + (index + 1) + '行推广固定金额必须大于0')
              } else {
                params.push({
                  goodsId: item.id,
                  type: item.types,
                  fixed: item.fixed,
                  proportion: item.proportion,
                  shopId: item.shopId
                })
              }
            }
          })
          if (params.length === this.fzData.length) {
            updateProportion(params).then(result => {
              this.visibleSetfz = false
              this.goodsVisible = false
              this.$refs.AddExtensionGoods.Refresh()
              this.$message.success('成功')
              this.fzData = []
              this.Initialization()
            })
          }
        } catch (e) {
          console.log(e)
        }
      } else {
        this.$message.warning('请先选择商品')
      }
    },
    handelDetail(row) {
      this.$router.push({ name: 'ExtensionDetail', query: {
        p: this.$ed({
          promoterId: row.agentId,
          userId: row.id
        })
      }})
    },
    handelAddRows(row) {
      row.shopId = localStorage.getItem('shopId')
      this.fzData.push(row)
      this.visibleSetfz = true
    },
    handelAllSelect(row) {
      if (row.length > 0) {
        row.forEach(item => {
          const goodsForm = item
          goodsForm.shopId = localStorage.getItem('shopId')
          this.fzData.push(goodsForm)
        })
        console.log(this.fzData)
        this.visibleSetfz = true
        this.handelClose()
      }
    },
    goodsRemove(row) {
      this.$confirm('删除确认', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fzData.forEach((item, index) => {
          if (row.id === item.id) {
            this.fzData.splice(index, 1)
          }
        })
      })
    },
    selectionChange(v) {
      this.selection = v.map(inf => inf.id)
      this.goodsType = v.map(inf => inf.type)
    },
    allHandelCancel() {
      if (this.selection.length > 0) {
        this.$confirm('确认取消推广', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(result => {
          extensionCancel(this.selection).then(result => {
            this.Initialization()
            this.$message.success('成功')
          })
        })
      } else {
        this.$message.warning('请先选择数据')
      }
    },
    /** 取消推广-单行 */
    handelCancel(id) {
      this.$confirm('确认取消推广', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(result => {
        extensionCancel(id).then(result => {
          this.Initialization()
          this.$message.success('成功')
        })
      })
    },
    goStaticExtensionDetail() {
      this.$router.push({ name: 'StaticExtensionDetail' })
    },
    handelEdit(row) {
      switch (this.activeModel) {
        case '1':
          this.$router.push({
            name: 'EditExtensionPre',
            query: {
              p: this.$ed({
                row: row, state: 'edit'
              })
            }
          })
          break
        case '2':
          this.$router.push({
            name: 'EditPlan',
            query: {
              p: this.$ed({
                row: row, state: 'edit'
              })
            }
          })
          break
        case '3':
          commodityDetail({ goodsId: row.id }).then(result => {
            console.log(result.data.data)
            const goodsInfo = result.data.data
            this.selectGoods.id = row.id
            this.selectGoods.name = row.name
            this.selectGoods.picUrl = row.picUrl
            if (goodsInfo.percent) {
              this.goodsForm.type = '0'
              this.goodsForm.percent = goodsInfo.percent
            } else if (goodsInfo.fix) {
              this.goodsForm.type = '1'
              this.goodsForm.fix = goodsInfo.fix
            }
            this.goodsfcbl = true
            /* this.$router.push({
              name: 'EditGoods',
              query: {
                p: this.$ed({
                  edit: true,
                  goodsId: row.id
                })
              }
            })*/
          })
          break
      }
    },
    handelRemove(id) {
      this.$confirm('你确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        switch (this.activeModel) {
          case '1':
            extensionManagementDel({ promoterId: id })
              .then(result => {
                this.$message.success('成功')
                this.Initialization()
              })
              .catch(err => {
                console.log(err)
              })
            break
          case '2':
            schemeDel({ schemeId: id })
              .then(result => {
                this.$message.success('成功')
                this.Initialization()
              })
              .catch(err => {
                console.log(err)
              })
            break
          case '3':
            break
        }
      })
    },
    /** 初始化 */
    Initialization() {
      this.loading = true
      switch (this.activeModel) {
        case '1':
          ExtensionManagementList({
            shopId: localStorage.getItem('shopId'),
            keySearch: this.keySearch || ''
          })
            .then(result => {
              console.log(result.data)
              this.BindataTuiGuangYuan = result.data.data
              this.pages.total = result.data.total
              this.loading = false
            })
            .catch(err => {
              console.log(err)
            })
          break
        case '2':
          // 推广方案列表获取
          schemeList({
            shopId: localStorage.getItem('shopId'),
            keySearch: this.keySearch || '',
            page: this.pages.pageIndex,
            limit: this.pages.pageSize
          })
            .then(result => {
              this.BindataFangAn = result.data.data.data
              this.pages.total = result.data.data.total || 0
              this.loading = false
            })
            .catch(err => {
              console.log(err)
            })
          break
        case '3':
          extensionList({
            shopId: localStorage.getItem('shopId'),
            keySearch: this.keySearch || '',
            page: this.pages.pageIndex,
            limit: this.pages.pageSize
          })
            .then(result => {
              this.BindataTGangPin = result.data.data.data
              console.log(this.BindataTGangPin)
              this.pages.total = result.data.data.total
              this.loading = false
            })
            .catch(err => {
              console.log(err)
            })
          break
      }
    },
    /** 推广信息 */
    ExtensionInfo() {
      ExtensionManagementInfo({ shopId: localStorage.getItem('shopId') })
        .then(result => {
          this.Infos = result.data.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleCellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      } else {
        return ''
      }
    },
    handleTabClidk(tab) {
      this.keySearch = ''
      this.Initialization()
    },
    handleSelectionChange() {},
    allList() {
      switch (this.activeModel) {
        case '1':
          break
        case '2':
          // 推广方案列表获取
          this.$refs.fa.toggleAllSelection()
          break
        case '3':
          this.$refs.goods.toggleAllSelection()
          break
      }
    },
    handelClose() {
      this.goodsVisible = false
      this.$refs.AddExtensionGoods.Refresh()
    },
    extensionLink(row) {
      this.linkVisible = true
      this.$refs.extensionLinkUrl.setData(row)
    },
    handelLinkUrlClose() {
      this.linkVisible = false
      this.resetQrcode = false
      this.$nextTick(() => {
        this.resetQrcode = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.clearfix:after {
  content: '020';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
.ExtensionManagement {
  padding: 50px 100px;
  .cus-header-content {
    padding: 10px 5px;
    border-radius: 5px;
    background: #f3f3f3;
    margin-bottom: 40px;

    .cus-header-item {
      padding: 12px;
      background: #ffffff;
      border-radius: 5px;
      display: flex;
      flex-direction: column;

      &-title {
        font-weight: bold;
        font-size: 14px;
      }

      &-count {
        font-size: 14px;
        margin-top: 10px;
      }
    }

    .cus-header-item:active {
      background: #f9f9f9;
    }

    /*div {*/
    /*  border-radius: 5px;*/
    /*  width: 150px;*/
    /*  background: white;*/
    /*  padding: 20px 0px;*/
    /*  p {*/
    /*    padding: 0;*/
    /*    margin: 0px;*/
    /*    padding-left: 10px;*/
    /*  }*/
    /*  p:first-child {*/
    /*    font-weight: bold;*/
    /*    margin-bottom: 10px;*/
    /*  }*/
    /*}*/
  }
  .cus-tabs-style {
    .key-search {
      width: 100%;
      .floatfix {
        float: right;
        .el-input {
          width: 220px;
        }
      }
    }
    .cus-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .cus-table {
      margin-top: 40px;
      .cus-column-commodity {
        display: flex;
        align-items: center;
        .left {
          width: 60px;
          height: 60px;
        }
        .right {
          margin-left: 10px;
        }
      }
      .operation {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 0px auto;
      }
    }
    .footer {
      display: flex;
      justify-content: space-between;
      margin: 50px 0px 50px 0px;
      .footer-left {
        ::v-deep.el-button {
          width: 100px;
          margin: 0px;
        }
      }
    }
  }
  .visibleSetfz {
    display: flex;
    .el-input {
      width: 120px;
    }
  }
  .goodsName {
    display: flex;
    align-items: center;
    span {
      margin-left: 20px;
    }
  }
  .extension-link {
    .content {
      margin-top: 20px;
      .left-tab {
        width: 150px;
        height: auto;
        background-color: #F5F7FA;
        padding-left: 5px;
        padding-top: 5px;
        .link-tab {
          margin-bottom: 10px;
          .el-radio-button {
            width: 140px;
            ::v-deep .el-radio-button__inner {
              width: 140px;
            }
          }
        }
      }
      .right-code-content {
        width: 750px;
        .little-title {
          width: 100%;
          height: 50px;
          background-color: #F5F7FA;
          p {
            line-height: 50px;
            color: #409EFF;
          }
        }
        .right-link-content {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          .left-code {
            width: 220px;
          }
          .right-linkAddress {
            width: 500px;
          }
        }
      }
    }
  }
}
</style>
